
@import url(icons.css);

@mixin TOOLBAR-SPAN {
  font:system;  
  height:length(band-size);
  line-height:height(100%);
  font-size:14dip;  
  padding-top:0;
  padding-bottom:0;
  margin-top:0;
  margin-bottom:0;
}

note-view {
  prototype: NoteView url(note-view.tis);
  display:block; 
  flow:vertical;
  overflow:hidden;
  width:*;
}

note-view > toolbar {
  style-set: note-toolbar;
}

note-view > htmlarea {
  prototype: HtmlArea url(htmlarea/htmlarea.tis);
  size:*;
  background:white;
  border:none;
  padding:0;
  overflow:scroll-indicator;
  //text-selection: var(selection-text,#000) var(selection,#0ff);
  text-selection: highlighttext highlight;
  context-menu: url(htmlarea/context-menu.htm);
}

/*note-view > history {
  display:block;
  flow:horizontal;
  background:#eee;
  font-size:80%;
}

note-view > history:not(:empty) {
  border-top:1px solid #ccc;
}

note-view > history > label { display:block; } */

@set note-toolbar 
{
  :root {
    flow: vertical;
    background:none;
    width:*;
  }

  band {
    display:block;
    flow:horizontal; 
  }

  band.common 
  {
    @HEADER-BAND;
    flow:horizontal;
  }

  band.minimal { width: max-content; }
  band.editing 
  { 
    flow:horizontal;
    width:*; 
    overflow-x:hidden; 
    horizontal-align:center; 
    visibility:hidden;
    height:38dip;
    transform: translate(0,-100%);
  }

  band.viewing 
  { 
    behavior:form;
    flow:horizontal;
    width:*; 
    overflow-x:hidden; 
    horizontal-align:center; 
    visibility:hidden;
    height:38dip;
    transform: translate(0,100%);
    border-spacing: 1em;
  }

  band.viewing > label {
    @TOOLBAR-SPAN;
    color:#aaa;
  }
  band.viewing > output { 
    @TOOLBAR-SPAN; 
  }

  band.viewing.note-not-modified > .modified { 
    visibility:none; 
  }

  band.viewing.note-created-by-me > .created.person { visibility:none; }
  band.viewing.note-modified-by-me > .modified.person { visibility:none; }

  :root[mode=editing] band.editing { 
    visibility:visible;
    transform: translate(0,0%);
    transition: transform(linear,200ms) visibility(linear, 200ms);
  }
  :root[mode=viewing] band.viewing { 
    visibility:visible;
    transform: translate(0,0%);    
    transition: transform(linear,200ms) visibility(linear, 200ms);
  }


  :root > div.stack {
    flow:stack;
    border-bottom:1px solid #ccc;
    overflow:hidden;
    width:*;
    height:38dip;
  }

  band > button { 
    display:block;
    size:38dip;
    max-width: 7%;
    foreground-position:50% 50%;
    foreground-repeat:no-repeat;
    foreground-size:50%;
    color:#666;
    fill:#666;
    stroke: none;
    padding:0;
    margin:0;
    border:none;
    background:none;
    //overflow:hidden;
  } 

  band > button:hover {
    fill:highlight;
    //background: radial-gradient(50% 50%, ellipse closest-side, highlight, highlight, #fff );
    //#fff;   
    //stroke: #FFF;
    //stroke-width:1px;
  } 

  band > button:checked {
    background-color:#eee;
    transition: background-color(linear,150ms);
  } 

  band > button:active {
    transform: translate(1px,1px);
  }

  band > button:disabled {
    fill:#ccc;
    transition: fill(linear,150ms);
  } 

  button.print { foreground-image: url(path:M448 1536h896v-256h-896v256zm0-640h896v-384h-160q-40 0-68-28t-28-68v-160h-640v640zm1152 64q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm128 0v416q0 13-9.5 22.5t-22.5 9.5h-224v160q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-224q-13 0-22.5-9.5t-9.5-22.5v-416q0-79 56.5-135.5t135.5-56.5h64v-544q0-40 28-68t68-28h672q40 0 88 20t76 48l152 152q28 28 48 76t20 88v256h64q79 0 135.5 56.5t56.5 135.5z)}  
  button.save { foreground-size:1.2em; foreground-image: url(path:m 1392,1040 q 4,0 20,-1 16,-1 26.5,-0.5 10.5,0.5 23.5,3 13,2.5 19.5,10 6.5,7.5 6.5,20.5 v 320 q 0,119 -84.5,203.5 Q 1319,1680 1200,1680 H 496 Q 377,1680 292.5,1595.5 208,1511 208,1392 v -320 q 0,-13 9.5,-22.5 9.5,-9.5 22.5,-9.5 4,0 20,-1 16,-1 26.5,-0.5 10.5,0.5 23.5,3 13,2.5 19.5,10 6.5,7.5 6.5,20.5 v 320 q 0,66 47,113 47,47 113,47 h 704 q 66,0 113,-47 47,-47 47,-113 v -312 l 1,-11.5 3,-11.5 5.5,-8 9,-7 z M 848,112 q 26,0 45,19 l 544,544 q 19,19 19,45 0,26 -19,45 -19,19 -45,19 h -288 v 448 q 0,26 -19,45 -19,19 -45,19 H 656 q -26,0 -45,-19 -19,-19 -19,-45 V 784 H 304 q -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 L 803,131 q 19,-19 45,-19 z);}
  button.open { foreground-size:1.2em; foreground-image: url(path:m 896,1312 q -26,0 -45,-19 L 307,749 q -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 H 640 V 192 q 0,-26 19,-45 19,-19 45,-19 h 384 q 26,0 45,19 19,19 19,45 v 448 h 288 q 26,0 45,19 19,19 19,45 0,26 -19,45 l -544,544 q -19,19 -45,19 z m 352,352 H 544 Q 425,1664 340.5,1579.5 256,1495 256,1376 v -320 q 0,-13 9.5,-22.5 9.5,-9.5 22.5,-9.5 4,0 20,-1 16,-1 26.5,-0.5 10.5,0.5 23.5,3 13,2.5 19.5,10 6.5,7.5 6.5,20.5 v 320 q 0,66 47,113 47,47 113,47 h 704 q 66,0 113,-47 47,-47 47,-113 v -312 l 1,-11.5 3,-11.5 5.5,-8 9,-7 13.5,-2 q 4,0 20,-1 16,-1 26.5,-0.5 10.5,0.5 23.5,3 13,2.5 19.5,10 6.5,7.5 6.5,20.5 v 320 q 0,119 -84.5,203.5 Q 1367,1664 1248,1664 Z);}  
  button.anchor { foreground-size:1.4em; foreground-image: url(path:M960 256q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm832 928v352q0 22-20 30-8 2-12 2-13 0-23-9l-93-93q-119 143-318.5 226.5t-429.5 83.5-429.5-83.5-318.5-226.5l-93 93q-9 9-23 9-4 0-12-2-20-8-20-30v-352q0-14 9-23t23-9h352q22 0 30 20 8 19-7 35l-100 100q67 91 189.5 153.5t271.5 82.5v-647h-192q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h192v-163q-58-34-93-92.5t-35-128.5q0-106 75-181t181-75 181 75 75 181q0 70-35 128.5t-93 92.5v163h192q26 0 45 19t19 45v128q0 26-19 45t-45 19h-192v647q149-20 271.5-82.5t189.5-153.5l-100-100q-15-16-7-35 8-20 30-20h352q14 0 23 9t9 23z)}  

  button.edit { foreground-size:1.6em; foreground-image: url(path:M888 1184l116-116-152-152-116 116v56h96v96h56zm440-720q-16-16-33 1l-350 350q-17 17-1 33t33-1l350-350q17-17 1-33zm80 594v190q0 119-84.5 203.5t-203.5 84.5h-832q-119 0-203.5-84.5t-84.5-203.5v-832q0-119 84.5-203.5t203.5-84.5h832q63 0 117 25 15 7 18 23 3 17-9 29l-49 49q-14 14-32 8-23-6-45-6h-832q-66 0-113 47t-47 113v832q0 66 47 113t113 47h832q66 0 113-47t47-113v-126q0-13 9-22l64-64q15-15 35-7t20 29zm-96-738l288 288-672 672h-288v-288zm444 132l-92 92-288-288 92-92q28-28 68-28t68 28l152 152q28 28 28 68t-28 68z) }    
  :root[mode=editing] button.edit { foreground-size:1.1em; foreground-image: url(path:M640 768h512v-192q0-106-75-181t-181-75-181 75-75 181v192zm832 96v576q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-576q0-40 28-68t68-28h32v-192q0-184 132-316t316-132 316 132 132 316v192h32q40 0 68 28t28 68z) }  

  button.paragraph { foreground-size:34%; foreground-image: url(path:M1534 189v73q0 29-18.5 61t-42.5 32q-50 0-54 1-26 6-32 31-3 11-3 64v1152q0 25-18 43t-43 18h-108q-25 0-43-18t-18-43v-1218h-143v1218q0 25-17.5 43t-43.5 18h-108q-26 0-43.5-18t-17.5-43v-496q-147-12-245-59-126-58-192-179-64-117-64-259 0-166 88-286 88-118 209-159 111-37 417-37h479q25 0 43 18t18 43z); }
  button.table { foreground-image: url(path:M576 1376v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm-512-768v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm-512-768v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm128-320v1088q0 66-47 113t-113 47h-1344q-66 0-113-47t-47-113v-1088q0-66 47-113t113-47h1344q66 0 113 47t47 113z); }
  button.image { foreground-image: url(path:M576 576q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1024 384v448h-1408v-192l320-320 160 160 512-512zm96-704h-1600q-13 0-22.5 9.5t-9.5 22.5v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5v-1216q0-13-9.5-22.5t-22.5-9.5zm160 32v1216q0 66-47 113t-113 47h-1600q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1600q66 0 113 47t47 113z)}
  button.unindent { foreground-image: url(path:M384 544v576q0 13-9.5 22.5t-22.5 9.5q-14 0-23-9l-288-288q-9-9-9-23t9-23l288-288q9-9 23-9 13 0 22.5 9.5t9.5 22.5zm1408 768v192q0 13-9.5 22.5t-22.5 9.5h-1728q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1088q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1088q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1728q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1728q13 0 22.5 9.5t9.5 22.5z)}
  button.indent { foreground-image: url(path:M352 832q0 14-9 23l-288 288q-9 9-23 9-13 0-22.5-9.5t-9.5-22.5v-576q0-13 9.5-22.5t22.5-9.5q14 0 23 9l288 288q9 9 9 23zm1440 480v192q0 13-9.5 22.5t-22.5 9.5h-1728q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1088q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1088q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1728q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1728q13 0 22.5 9.5t9.5 22.5z)}
  button.blockquote { foreground-size:45%; foreground-image: url(path:M832 960v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5 163.5-109.5 198.5-40.5h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136zm896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5 163.5-109.5 198.5-40.5h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136z)}  
  button.list-ol { foreground-image: url(path:M381 1620q0 80-54.5 126t-135.5 46q-106 0-172-66l57-88q49 45 106 45 29 0 50.5-14.5t21.5-42.5q0-64-105-56l-26-56q8-10 32.5-43.5t42.5-54 37-38.5v-1q-16 0-48.5 1t-48.5 1v53h-106v-152h333v88l-95 115q51 12 81 49t30 88zm2-627v159h-362q-6-36-6-54 0-51 23.5-93t56.5-68 66-47.5 56.5-43.5 23.5-45q0-25-14.5-38.5t-39.5-13.5q-46 0-81 58l-85-59q24-51 71.5-79.5t105.5-28.5q73 0 123 41.5t50 112.5q0 50-34 91.5t-75 64.5-75.5 50.5-35.5 52.5h127v-60h105zm1409 319v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-14 9-23t23-9h1216q13 0 22.5 9.5t9.5 22.5zm-1408-899v99h-335v-99h107q0-41 .5-122t.5-121v-12h-2q-8 17-50 54l-71-76 136-127h106v404h108zm1408 387v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-14 9-23t23-9h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z)}
  button.list-ul { foreground-image: url(path:M384 1408q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm0-512q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm-1408-928q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1408 416v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5t-22.5 9.5h-1216q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1216q13 0 22.5 9.5t9.5 22.5z)}
  button.list-dl { foreground-image: url(path:M256 1312v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm1536 768v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm-1536-1152v192q0 13-9.5 22.5t-22.5 9.5h-192q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h192q13 0 22.5 9.5t9.5 22.5zm1536 768v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5h-1344q-13 0-22.5-9.5t-9.5-22.5v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5z)}
  button.list-dir { foreground-image: url(path:m 1532.5762,-471.63867 c -34.961,0.0335 -70.7595,17.04409 -93.7813,46.17773 l -195.8769,300.72656 -57.6114,-65.60546 c -34.5666,-43.74334 -97.9384,-49.21083 -144.0273,-10.93555 -40.3277,32.80749 -46.09005,92.95409 -11.5234,136.697265 l 149.789,169.503905 c 17.2833,21.87162 46.0897,32.8086 80.6563,32.8086 h 5.7597 c 34.5667,0 63.3729,-16.40446 80.6563,-43.744146 l 270.7715,-415.564454 c 28.8053,-49.21113 17.2835,-109.35568 -34.5664,-136.69531 -14.4029,-8.54355 -30.4935,-12.81972 -46.8653,-13.32031 -1.1255,-0.0344 -2.2531,-0.0499 -3.3808,-0.0488 z m 184.8515,205.58789 c -8.125,0 -15.1562,3.16667 -21.0937,9.5 -5.9375,6.33333 -8.9063,13.83332 -8.9063,22.5 v 191.999999 c 0,8.666658 2.9688,16.166671 8.9063,22.5 5.9375,6.333354 12.9687,9.5 21.0937,9.5 h 1140 c 8.125,0 15.1563,-3.166646 21.0938,-9.5 5.9375,-6.333329 8.9062,-13.833342 8.9062,-22.5 V -234.05078 c 0,-8.66668 -2.9687,-16.16667 -8.9062,-22.5 -5.9375,-6.33333 -12.9688,-9.5 -21.0938,-9.5 z m -430,448 c -53.3333,0 -98.6666,18.66669 -136,56 -37.3333,37.33334 -56,82.66666 -56,136 0,53.33331 18.6667,98.66666 56,136 37.3334,37.33334 82.6667,56 136,56 53.3334,0 98.6667,-18.66666 136,-56 37.3334,-37.33334 56,-82.66669 56,-136 0,-53.33334 -18.6666,-98.66666 -56,-136 -37.3333,-37.33331 -82.6666,-56 -136,-56 z m 430,64 c -8.125,0 -15.1562,3.16667 -21.0937,9.5 -5.9375,6.33333 -8.9063,13.83332 -8.9063,22.5 v 192 c 0,8.66666 2.9688,16.16667 8.9063,22.5 5.9375,6.33333 12.9687,9.5 21.0937,9.5 h 1140 c 8.125,0 15.1563,-3.16667 21.0938,-9.5 5.9375,-6.33333 8.9062,-13.83334 8.9062,-22.5 v -192 c 0,-8.66668 -2.9687,-16.16667 -8.9062,-22.5 -5.9375,-6.33333 -12.9688,-9.5 -21.0938,-9.5 z m -430,448 c -53.3333,0 -98.6666,18.66666 -136,56 -37.3333,37.33334 -56,82.66668 -56,136 0,53.33334 18.6667,98.66666 56,135.99998 37.3334,37.3333 82.6667,56 136,56 53.3334,0 98.6667,-18.6667 136,-56 37.3334,-37.33332 56,-82.66664 56,-135.99998 0,-53.33332 -18.6666,-98.66666 -56,-136 -37.3333,-37.33334 -82.6666,-56 -136,-56 z m 430,64 c -8.125,0 -15.1562,3.16667 -21.0937,9.5 -5.9375,6.33333 -8.9063,13.83334 -8.9063,22.5 v 192 c 0,8.66668 2.9688,16.16667 8.9063,22.49998 5.9375,6.3333 12.9687,9.5 21.0937,9.5 h 1140 c 8.125,0 15.1563,-3.1667 21.0938,-9.5 5.9375,-6.33331 8.9062,-13.8333 8.9062,-22.49998 v -192 c 0,-8.66666 -2.9687,-16.16667 -8.9062,-22.5 -5.9375,-6.33333 -12.9688,-9.5 -21.0938,-9.5 z)}
  button.link { foreground-image: url(path:M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zm-703-705q0-40-28-68l-206-207q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5t-21.5-21.5-15-19-13-25.5-3.5-27.5q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84l-208-208q-84-84-84-204t85-203l147-146q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z)}
  button.link.unlink { foreground-image: url(path:M503 1271l-256 256q-10 9-23 9-12 0-23-9-9-10-9-23t9-23l256-256q10-9 23-9t23 9q9 10 9 23t-9 23zm169 41v320q0 14-9 23t-23 9-23-9-9-23v-320q0-14 9-23t23-9 23 9 9 23zm-224-224q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23 9-23 23-9h320q14 0 23 9t9 23zm1264 128q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-334-335q-21-21-42-56l239-18 273 274q27 27 68 27.5t68-26.5l147-146q28-28 28-67 0-40-28-68l-274-275 18-239q35 21 56 42l336 336q84 86 84 204zm-617-724l-239 18-273-274q-28-28-68-28-39 0-68 27l-147 146q-28 28-28 67 0 40 28 68l274 274-18 240q-35-21-56-42l-336-336q-84-86-84-204 0-120 85-203l147-146q83-83 203-83 121 0 204 85l334 335q21 21 42 56zm633 84q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23 9-23 23-9h320q14 0 23 9t9 23zm-544-544v320q0 14-9 23t-23 9-23-9-9-23v-320q0-14 9-23t23-9 23 9 9 23zm407 151l-256 256q-11 9-23 9t-23-9q-9-10-9-23t9-23l256-256q10-9 23-9t23 9q9 10 9 23t-9 23z)}
  button.activators {foreground-image: url(path:M832 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm768 512q0-52-38-90t-90-38-90 38-38 90q0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm0-1024q0-52-38-90t-90-38-90 38-38 90q0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm-384 421v185q0 10-7 19.5t-16 10.5l-155 24q-11 35-32 76 34 48 90 115 7 10 7 20 0 12-7 19-23 30-82.5 89.5t-78.5 59.5q-11 0-21-7l-115-90q-37 19-77 31-11 108-23 155-7 24-30 24h-186q-11 0-20-7.5t-10-17.5l-23-153q-34-10-75-31l-118 89q-7 7-20 7-11 0-21-8-144-133-144-160 0-9 7-19 10-14 41-53t47-61q-23-44-35-82l-152-24q-10-1-17-9.5t-7-19.5v-185q0-10 7-19.5t16-10.5l155-24q11-35 32-76-34-48-90-115-7-11-7-20 0-12 7-20 22-30 82-89t79-59q11 0 21 7l115 90q34-18 77-32 11-108 23-154 7-24 30-24h186q11 0 20 7.5t10 17.5l23 153q34 10 75 31l118-89q8-7 20-7 11 0 21 8 144 133 144 160 0 9-7 19-12 16-42 54t-45 60q23 48 34 82l152 23q10 2 17 10.5t7 19.5zm640 533v140q0 16-149 31-12 27-30 52 51 113 51 138 0 4-4 7-122 71-124 71-8 0-46-47t-52-68q-20 2-30 2t-30-2q-14 21-52 68t-46 47q-2 0-124-71-4-3-4-7 0-25 51-138-18-25-30-52-149-15-149-31v-140q0-16 149-31 13-29 30-52-51-113-51-138 0-4 4-7 4-2 35-20t59-34 30-16q8 0 46 46.5t52 67.5q20-2 30-2t30 2q51-71 92-112l6-2q4 0 124 70 4 3 4 7 0 25-51 138 17 23 30 52 149 15 149 31zm0-1024v140q0 16-149 31-12 27-30 52 51 113 51 138 0 4-4 7-122 71-124 71-8 0-46-47t-52-68q-20 2-30 2t-30-2q-14 21-52 68t-46 47q-2 0-124-71-4-3-4-7 0-25 51-138-18-25-30-52-149-15-149-31v-140q0-16 149-31 13-29 30-52-51-113-51-138 0-4 4-7 4-2 35-20t59-34 30-16q8 0 46 46.5t52 67.5q20-2 30-2t30 2q51-71 92-112l6-2q4 0 124 70 4 3 4 7 0 25-51 138 17 23 30 52 149 15 149 31z); }

  button.span { foreground-size:40%; foreground-image: url(path:M789 559l-170 450q33 0 136.5 2t160.5 2q19 0 57-2-87-253-184-452zm-725 1105l2-79q23-7 56-12.5t57-10.5 49.5-14.5 44.5-29 31-50.5l237-616 280-724h128q8 14 11 21l205 480q33 78 106 257.5t114 274.5q15 34 58 144.5t72 168.5q20 45 35 57 19 15 88 29.5t84 20.5q6 38 6 57 0 4-.5 13t-.5 13q-63 0-190-8t-191-8q-76 0-215 7t-178 8q0-43 4-78l131-28q1 0 12.5-2.5t15.5-3.5 14.5-4.5 15-6.5 11-8 9-11 2.5-14q0-16-31-96.5t-72-177.5-42-100l-450-2q-26 58-76.5 195.5t-50.5 162.5q0 22 14 37.5t43.5 24.5 48.5 13.5 57 8.5 41 4q1 19 1 58 0 9-2 27-58 0-174.5-10t-174.5-10q-8 0-26.5 4t-21.5 4q-80 14-188 14z)}
  button.pre { foreground-size:56%; foreground-image: url(path:M553 1399l-50 50q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23l-393 393 393 393q10 10 10 23t-10 23zm591-1067l-373 1291q-4 13-15.5 19.5t-23.5 2.5l-62-17q-13-4-19.5-15.5t-2.5-24.5l373-1291q4-13 15.5-19.5t23.5-2.5l62 17q13 4 19.5 15.5t2.5 24.5zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z); }
  
  li.span.remove { foreground-size:1em; foreground-image: url(path:M832 1408l336-384h-768l-336 384h768zm1013-1077q15 34 9.5 71.5t-30.5 65.5l-896 1024q-38 44-96 44h-768q-38 0-69.5-20.5t-47.5-54.5q-15-34-9.5-71.5t30.5-65.5l896-1024q38-44 96-44h768q38 0 69.5 20.5t47.5 54.5z)}  
  li.strong { foreground-size:0.9em; foreground-image: url(path:M747 1521q74 32 140 32 376 0 376-335 0-114-41-180-27-44-61.5-74t-67.5-46.5-80.5-25-84-10.5-94.5-2q-73 0-101 10 0 53-.5 159t-.5 158q0 8-1 67.5t-.5 96.5 4.5 83.5 12 66.5zm-14-746q42 7 109 7 82 0 143-13t110-44.5 74.5-89.5 25.5-142q0-70-29-122.5t-79-82-108-43.5-124-14q-50 0-130 13 0 50 4 151t4 152q0 27-.5 80t-.5 79q0 46 1 69zm-541 889l2-94q15-4 85-16t106-27q7-12 12.5-27t8.5-33.5 5.5-32.5 3-37.5.5-34v-65.5q0-982-22-1025-4-8-22-14.5t-44.5-11-49.5-7-48.5-4.5-30.5-3l-4-83q98-2 340-11.5t373-9.5q23 0 68.5.5t67.5.5q70 0 136.5 13t128.5 42 108 71 74 104.5 28 137.5q0 52-16.5 95.5t-39 72-64.5 57.5-73 45-84 40q154 35 256.5 134t102.5 248q0 100-35 179.5t-93.5 130.5-138 85.5-163.5 48.5-176 14q-44 0-132-3t-132-3q-106 0-307 11t-231 12z)}
  li.em { foreground-size:0.7em; foreground-image: url(path:M384 1662l17-85q6-2 81.5-21.5t111.5-37.5q28-35 41-101 1-7 62-289t114-543.5 52-296.5v-25q-24-13-54.5-18.5t-69.5-8-58-5.5l19-103q33 2 120 6.5t149.5 7 120.5 2.5q48 0 98.5-2.5t121-7 98.5-6.5q-5 39-19 89-30 10-101.5 28.5t-108.5 33.5q-8 19-14 42.5t-9 40-7.5 45.5-6.5 42q-27 148-87.5 419.5t-77.5 355.5q-2 9-13 58t-20 90-16 83.5-6 57.5l1 18q17 4 185 31-3 44-16 99-11 0-32.5 1.5t-32.5 1.5q-29 0-87-10t-86-10q-138-2-206-2-51 0-143 9t-121 11z)}
  li.sub { foreground-image: url(path:M1025 1369v167h-248l-159-252-24-42q-8-9-11-21h-3l-9 21q-10 20-25 44l-155 250h-258v-167h128l197-291-185-272h-137v-168h276l139 228q2 4 23 42 8 9 11 21h3q3-9 11-21l25-42 140-228h257v168h-125l-184 267 204 296h109zm639 217v206h-514l-4-27q-3-45-3-46 0-64 26-117t65-86.5 84-65 84-54.5 65-54 26-64q0-38-29.5-62.5t-70.5-24.5q-51 0-97 39-14 11-36 38l-105-92q26-37 63-66 80-65 188-65 110 0 178 59.5t68 158.5q0 66-34.5 118.5t-84 86-99.5 62.5-87 63-41 73h232v-80h126z)}
  li.sup { foreground-image: url(path:M1025 1369v167h-248l-159-252-24-42q-8-9-11-21h-3l-9 21q-10 20-25 44l-155 250h-258v-167h128l197-291-185-272h-137v-168h276l139 228q2 4 23 42 8 9 11 21h3q3-9 11-21l25-42 140-228h257v168h-125l-184 267 204 296h109zm637-679v206h-514l-3-27q-4-28-4-46 0-64 26-117t65-86.5 84-65 84-54.5 65-54 26-64q0-38-29.5-62.5t-70.5-24.5q-51 0-97 39-14 11-36 38l-105-92q26-37 63-66 83-65 188-65 110 0 178 59.5t68 158.5q0 56-24.5 103t-62 76.5-81.5 58.5-82 50.5-65.5 51.5-30.5 63h232v-80h126z)}
  li.del { foreground-image: url(path:M1760 896q14 0 23 9t9 23v64q0 14-9 23t-23 9h-1728q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h1728zm-1277-64q-28-35-51-80-48-97-48-188 0-181 134-309 133-127 393-127 50 0 167 19 66 12 177 48 10 38 21 118 14 123 14 183 0 18-5 45l-12 3-84-6-14-2q-50-149-103-205-88-91-210-91-114 0-182 59-67 58-67 146 0 73 66 140t279 129q69 20 173 66 58 28 95 52h-743zm507 256h411q7 39 7 92 0 111-41 212-23 55-71 104-37 35-109 81-80 48-153 66-80 21-203 21-114 0-195-23l-140-40q-57-16-72-28-8-8-8-22v-13q0-108-2-156-1-30 0-68l2-37v-44l102-2q15 34 30 71t22.5 56 12.5 27q35 57 80 94 43 36 105 57 59 22 132 22 64 0 139-27 77-26 122-86 47-61 47-129 0-84-81-157-34-29-137-71z)}
  li.underline { foreground-size:1.0em; foreground-image: url(path:M176 223q-37-2-45-4l-3-88q13-1 40-1 60 0 112 4 132 7 166 7 86 0 168-3 116-4 146-5 56 0 86-2l-1 14 2 64v9q-60 9-124 9-60 0-79 25-13 14-13 132 0 13 .5 32.5t.5 25.5l1 229 14 280q6 124 51 202 35 59 96 92 88 47 177 47 104 0 191-28 56-18 99-51 48-36 65-64 36-56 53-114 21-73 21-229 0-79-3.5-128t-11-122.5-13.5-159.5l-4-59q-5-67-24-88-34-35-77-34l-100 2-14-3 2-86h84l205 10q76 3 196-10l18 2q6 38 6 51 0 7-4 31-45 12-84 13-73 11-79 17-15 15-15 41 0 7 1.5 27t1.5 31q8 19 22 396 6 195-15 304-15 76-41 122-38 65-112 123-75 57-182 89-109 33-255 33-167 0-284-46-119-47-179-122-61-76-83-195-16-80-16-237v-333q0-188-17-213-25-36-147-39zm1488 1409v-64q0-14-9-23t-23-9h-1472q-14 0-23 9t-9 23v64q0 14 9 23t23 9h1472q14 0 23-9t9-23z)}
  li.mark { foreground-size:1.0em; foreground-image: url(path:M1664 416v960q0 119-84.5 203.5t-203.5 84.5h-960q-119 0-203.5-84.5t-84.5-203.5v-960q0-119 84.5-203.5t203.5-84.5h960q119 0 203.5 84.5t84.5 203.5z);} 
  li.mark.a { fill: #fcfc93; }  
  li.mark.b { fill: #a0f7a3; }  
  li.mark.c { fill: #e0a0f7; }  

  //button:first-child { margin-left:*; }

  /*button.pre > code {
    display:block;
    //border:1px solid;
    line-height:1.6em;
    width:max-content;
    font-weight:bold;
    margin:*;
  }*/



  button.table {
    aspect: ButtonTableSelector url(htmlarea/table-ctrl.tis);
  }

  button.table > popup {
    popup-position: top-center bottom-center; /*point-on-popup at point-on-anchor */
    size:max-content;
    background: #eee;
    border:1dip solid #ccc;
    padding:4dip;
  }

  button.table > popup > header { 
    behavior:form; 
    flow:row(label,div);
    background: transparent; 
    width:*; 
  }
  button.table > popup > header > label {
    display:inline-block;
    width:max-content;
    margin-left:*;
  }

  button.table > popup > table { border-collapse:collapse; padding:0; }
  button.table > popup td 
  {
    behavior:clickable;
    border:1dip solid #999;
    size: 1.7em 1em;
    background:#fff;
    cursor:pointer;
  }
  button.table > popup td.selected {
    background: highlight;
  }
  button.table > popup td:hover {
    outline:2dip solid #999 -1dip;
  }

  select.book {
    display:block;
    background:none;
    border: none;
    border-radius:0;
    min-height:auto;
    height:*;
    padding:0;
  }

  select.book > caption
  {
    @TOOLBAR-SPAN;
    text-align:center;
    min-height:auto;
    padding-left:0;
    margin:0;
    width:*;
  }

  select.book span.name {
    @TOOLBAR-SPAN;
    display:block;
    width:*;
    line-height:height(100%);
    foreground-image: url(path: M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z);
    foreground-repeat:no-repeat;
    foreground-position: 6dip 50%;
    foreground-size: 12dip 12dip;
    padding-left: 24dip;
    stroke: #777;
    stroke-width:1px;
  }

  select.book span.deleted-notes {
    foreground-image: url(path:M704 736v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm256 0v576q0 14-9 23t-23 9h-64q-14 0-23-9t-9-23v-576q0-14 9-23t23-9h64q14 0 23 9t9 23zm128 724v-948h-896v948q0 22 7 40.5t14.5 27 10.5 8.5h832q3 0 10.5-8.5t14.5-27 7-40.5zm-672-1076h448l-48-117q-7-9-17-11h-317q-10 2-17 11zm928 32v64q0 14-9 23t-23 9h-96v948q0 83-47 143.5t-113 60.5h-832q-66 0-113-58.5t-47-141.5v-952h-96q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h309l70-167q15-37 54-63t79-26h320q40 0 79 26t54 63l70 167h309q14 0 23 9t9 23z);
    stroke-width:0;
    fill: #444;
    border-top: 1px solid #777;
  }

  select.book > caption > span.name {
    width:max-content;
    margin:0 *;
    border: none;
  }

  select.book option span.name {
    height:1.8em;
  }

  select.book option:hover {
    foreground-color:color(hover-highlight);
  }



  /*select.book > caption > span.name[color=0] { background: @BC0; }
  select.book > caption > span.name[color=1] { background: @BC1; }
  select.book > caption > span.name[color=2] { background: @BC2; }
  select.book > caption > span.name[color=3] { background: @BC3; }
  select.book > caption > span.name[color=4] { background: @BC4; }
  select.book > caption > span.name[color=5] { background: @BC5; }
  select.book > caption > span.name[color=6] { background: @BC6; }*/

  select.book > button
  {
    padding:0;
    border:none;
    margin:0;
  }

  tags {
    prototype: NoteTags url(note-tag-list.tis);
    font:system;
    flow: horizontal;
    display: block;
    border-spacing:4dip;
    padding:0 4dip;
    width:*;
    height:38dip;
    font-size: 14dip;
  }

  //tags > label.tag:last-child { margin-right:*; }
  //tags > label.tag:first-child { margin-left:*; }

  tags > label.tag {
    display:block;
    width:*;
    max-width:max-content;
    color:#000;
    padding:0 22dip 2dip 4dip;
    margin:* 0;
    //height:1.6em; 
    //line-height:height(100%);
    border:1px solid #777;
    foreground-image: url(path:M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z);
    foreground-repeat: no-repeat;
    foreground-size:0.8em;
    foreground-position-top: 50%;
    foreground-position-right: 0.5em;
    border-radius:0 height(50%) height(50%) 0;

    //foreground-position:0.4em 50%;
    //border-radius:height(50%) 0 0 height(50%);

    fill:#777;
    background:#fff;
  }

  tags > label.tag.name[color=0] { background-color: @BC0; } 
  tags > label.tag.name[color=1] { background-color: @BC1; }
  tags > label.tag.name[color=2] { background-color: @BC2; }
  tags > label.tag.name[color=3] { background-color: @BC3; }
  tags > label.tag.name[color=4] { background-color: @BC4; }
  tags > label.tag.name[color=5] { background-color: @BC5; }
  tags > label.tag.name[color=6] { background-color: @BC6; } 

/*  tags > label.tag.name[color=0] { background-color: @FC0; } 
  tags > label.tag.name[color=1] { background-color: @FC1; }
  tags > label.tag.name[color=2] { background-color: @FC2; }
  tags > label.tag.name[color=3] { background-color: @FC3; }
  tags > label.tag.name[color=4] { background-color: @FC4; }
  tags > label.tag.name[color=5] { background-color: @FC5; }
  tags > label.tag.name[color=6] { background-color: @FC6; } */



  tags > input.new {
    background:none;
    border: none;
    border-radius:0;
    font:inherit;
    height:length(band-size); 
    line-height:height(100%);
    padding:0 8dip;
    //margin-right:8dip;
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
    width:*;
    max-width:8em;
    popup-position: top-right bottom-right; /*point-on-popup at point-on-anchor */
  }

  tags > input.new:empty { color:#777; }
  tags > input.new:empty:hover { color:#333; }
  tags > input.new:owns-focus { background:#fff;}


}  